import React, { Component } from 'react';
//引入 图片验证码插件
import Captcha from 'react-captcha-code';
import { Input, Button, message } from 'antd';
//引入高阶组件
import withGoBack from '../../components/hoc/withGoBack';

//引入接口
import { getSmsCode, login } from '../../api/user';


//引入样式
import "./login.scss";
class Login extends Component {
    constructor(props) {
        super(props);
        this.state = {
            phone: "",//接收电话号码
            smsCode: "",//验证码
            disabled: false, //按钮是否置灰  false 没有置灰
            btnText: '获取验证码'
        }
        this.timer = "";//保存定时器的变量
    }
    handleClick = (code) => {
        console.log(code);
    }
    //接收 input框的数据
    changeInput = (ev) => {
        console.log(ev.target.name);

        this.setState({
            [ev.target.name]: ev.target.value
        })
    }
    sendSmsCode = () => {
        /*
        1.验证  
            手机号码是否为空
            手机号码的格式是否正确
        2.调用 生成验证码的接口
        3.提示验证码已经发送
        4.倒计时，按钮置灰
        5.超出60秒，定时器停止、按钮需要恢复    
        */
        //1验证
        const phone = this.state.phone.trim();
        const reg = /\S/;//不是空白符
        const reg1 = /^1[3,4,5,6,7,8,9]\d{9}$/;
        if (!reg.test(phone)) {//验证没通过，报一个错误
            message.error("请输入手机号码");
        } else if (!reg1.test(phone)) {//验证手机格式
            message.error("手机号码格式错误");
        } else {//验证通过调接口
            getSmsCode(phone).then(res => {
                console.log(res);
                //按钮置灰
                this.setState({ disabled: true })
                //验证码已经发送
                message.info("验证码已经发送");
                //倒计时 ，
                let num = 60; //倒计时的初始时间
                this.timer = setInterval(() => {
                    num--;
                    this.setState({ btnText: "重发(" + num + ")s" });
                    if (num <= 0) {
                        clearInterval(this.timer);
                        this.setState({
                            btnText: "发送验证码",
                            disabled: false
                        })
                    }
                }, 1000)
            })
        }
    }
    //登录操作
    Login = () => {
        const phone = this.state.phone.trim();
        const smsCode = this.state.smsCode.trim();
        const reg = /\S/;//不是空白符
        const reg1 = /^1[3,4,5,6,7,8,9]\d{9}$/;
        const reg2 = /^\d{4}$/;
        if (!reg.test(phone)) {//验证没通过，报一个错误
            message.error("请输入手机号码");
        } else if (!reg1.test(phone)) {//验证手机格式
            message.error("手机号码格式错误");
        } else if (!reg.test(smsCode)) {
            message.error("请输入验证码");
        } else if (!reg2.test(smsCode)) {
            message.error("验证码格式错误");
        } else {
            //验证通过调登录接口
            console.log("调用登录接口");
            login({ phone: phone, smsCode: smsCode }).then(res => {
                console.log(res);
                if (res.data.code === 1) {//获取数据失败
                    message.error(res.data.msg);
                } else {//成功
                    //1.保存登录成功的状态值，登录成功 返回的数据，缓存
                    localStorage.setItem('token', res.data.data.token);
                    localStorage.setItem('username', res.data.data.user.username);
                    //2.提示
                    message.success("登陆成功");
                    console.log(105);

                    //3.跳转
                    //this.props.history.push('/center');
                    window.location.reload();
                }
            })
        }
    }
    //作业:点击头部 用户中心小图标或购物车小图标的时候，跳转到 登录页需要带 search参数，登录后，跳转到响应页面
    //没带参数登录，跳转到用户中心
    //卸载前停止定时器
    componentWillUnmount() {
        clearInterval(this.timer);
    }
    render() {
        const { phone, smsCode, disabled, btnText } = this.state
        return (<div>
            {/* <Captcha charNum={4} onChange={this.handleClick} /> */}
            <div className="login_con">
                <div>
                    <Input type="text" placeholder="输入手机号" value={phone} className="login_input"
                        name="phone" onInput={this.changeInput} />
                </div>
                <div className="sms_div">
                    <Input type="text" placeholder="输入验证码" value={smsCode} className="login_input sms_width"
                        name="smsCode" onInput={this.changeInput} />
                    <Button type="primary" className="login_input" onClick={this.sendSmsCode} disabled={disabled}>{btnText}</Button>
                </div>
                <div className="sms_div">
                    <Button type="primary" className="login_btn" onClick={this.Login} >登录/注册</Button>
                </div>
            </div>
        </div>);
    }
}

//容器组件时
// const user = { "id": 1, "name": "lili" };
// const test = () => { }
export default withGoBack("登录/注册")(Login);
